<template>
  <div class="login">
    <!-- 顶部栏 -->
    <div class="top">
      <van-nav-bar left-arrow @click-left="onClickLeft" />
    </div>
    <div class="container">
      <h4>您好，请登录</h4>
      <van-form @submit="onSubmit">
        <van-field
          v-model="mobile"
          name="mobile"
          left-icon="phone-o"
          placeholder="请输入手机号"
          required
          :rules="[
            { required: true, message: '手机号不能为空' },
            {
              pattern: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
              message: '手机号格式不对'
            }
          ]"
        />
        <van-field
          v-model="code"
          name="code"
          center
          clearable
          left-icon="certificate"
          placeholder="请输入验证码"
          required
          :rules="[
            { required: true, message: '验证码不能为空' },
            {
              pattern: /^\d{4}$/,
              message: '验证码格式不对'
            }
          ]"
        >
          <template #button>
            <van-button
              size="small"
              type="primary"
              :disabled="!isLogin"
              v-bind:class="[isLogin ? 'reg_active' : 'reg_disActive']"
              @click="codebtn"
            >
              <span v-if="isLogin">{{ loadingmsg }}</span>
              <span v-if="!isLogin">{{ count }}秒后{{ loadingmsg }}</span>
            </van-button>
            <!-- :loading-text="loadingmsg" -->
            <!-- :loading="isLogin" -->
          </template>
        </van-field>
        <p class="agree">
          登录即同意 <span>《用户使用协议》</span>和<span>《隐私协议》</span>
        </p>
        <div style="margin: 16px;">
          <van-button
            round
            block
            type="info"
            native-type="submit"
            :disabled="issubmit"
            :loading="issubmit"
            loading-text="登录中..."
            loading-type="spinner"
            >登录</van-button
          >
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
// 导入接口
import { codeApi, loginApi } from '@/api/user'
import { saveToken } from '@/utils/token.js'
import {Toast} from 'vant'
export default {
  name: 'login',
  data () {
    return {
      mobile: '18888881111',
      code: '',
      isLogin: true,
      count: '',
      issubmit: false,
      loadingmsg: '获取验证码'
    }
  },

  methods: {
    onClickLeft () {
      Toast('返回')
      this.$router.go(-1)
    },
    // 获取验证码
    async codebtn () {
      // 按钮加载效果
      this.isLogin = true
      const time_count = 5
      if (!this.timer) {
        this.count = time_count
        this.isLogin = false
        this.loadingmsg = '重新发送'
        const timer = setInterval(() => {
          if (this.count > 0 && this.count <= time_count) {
            this.count--
          } else {
            this.isLogin = true
            clearInterval(timer)
            this.timer = 0
          }
        }, 1000)
        this.isLogin = false
        this.$toast.loading({
          message: '加载中...',
          forbidClick: true
        })
      }
      // 无论成功还是失败，只要请求完成了就要取消loading效果
      // 手动清除 Toast
      this.$toast.clear()
      this.isLogin = false

      const res = await codeApi(this.mobile)
      if (res.data.code == 401) {
        this.$toast.fail(res.data.message)
      } else if (res.data.code == 200) {
        this.$toast.success(res.data.data)
        this.code = res.data.data
      } else {
        this.$toast.fail('获取验证码失败')
      }
    },
    // 1. 点击表单中的按钮触发
    // 1. 点击表单中的按钮触发
    async onSubmit (values) {
      console.log(values)
      // 按钮加载效果
      this.issubmit = true
      // 1.1 登录请求
      const res = await loginApi(values)
      // console.log(res);
      // (1)弹窗提示
      this.$toast.success('登录成功')
      // (2)取消按钮加载效果
      // (3)存token
      saveToken(res.data.data)
      // console.log(res.data.data);
      // (4)跳转发现页
      this.$router.push({ path: '/mine' })
      this.issubmit = false
    }
  },
  created () {}
}
</script>

<style lang="less">
.login {
  padding: 0 14px;
  // height: 750px;
  background-color: #fff;
  .top {
    padding-left: 0px;
    .van-nav-bar .van-icon {
      color: #000;
      margin-left: -20px;
    }
  }
  .container {
    h4 {
      display: flex;
      font-size: 18px;
      padding: 25px 0;
    }
    input.van-field__control {
      padding-left: 20px;
    }
    .van-button--primary {
      color: #00b8d4;
      background-color: #fff;
      border: 0 #fff;
    }
    // a{
    //  color: #00b8d4;
    //   background-color: #fff;
    //   border: 0 #fff;
    // }
    .van-field__error-message {
      padding-left: 20px;
    }
    .agree {
      font-size: 12px;
      font-family: PingFangSC, PingFangSC-Regular;
      color: #181a39;
      span {
        color: #00b8d4;
      }
      .van-button--info {
        color: #fff;
        background-color: red;
        border: 0.02667rem solid #1989fa;
      }
    }
    .van-button--info {
      margin-top: 40px;
      color: #fff;
      background-color: #ee0a24;
      border: 0.02667rem solid #ee0a24;
    }
  }
}
</style>
